<template>
  <div class="article-container">
    <div class='tab-container'>
      <van-tabs
        v-model="activeIndex"
        color="#007AE6"
        :line-width="20"
        title-active-color="#007AE6"
        sticky
        animated
        @click="onChange"
      >
        <van-tab
          v-for="item in tabs"
          :key="item.index"
          :title="item.label"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="tab-box">
      <Tips v-if="list.length"
      :isBottom="false"
      :isTool="false" 
      title="文章分享"
      unit="次"
      :increase="todayCount" 
      :reduce="yesterdayCount" />
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finished && !list.length ? '' : '没有更多了'"
        @load="onLoad"
      >
        <div v-for="(item,key) in list" :key="key">
          <div class="item box-shadow-1px-bottom" @click="jump(item)">
            <div class="item-left">
              <p class="title">{{item.articleName}}</p>
              <div class="txt">
                <p class="count ellipsis">
                  <span class="dot" :class="item.dynamicCount ? '' : 'is-zero'"></span>
                  <span>{{item.dynamicCount || 0}}条动态</span>
                </p>
                <p class='time'>{{item.updateTimeStr}}</p>
              </div>
            </div>
            <div class="item-right">
              <img :src="item.articleImgUrl || require('@/assets/img/dynamics/palceholder-img.png')" class='cover-img'>
            </div>
            <!-- 是否下架 -->
            <div class="bg_img expire" v-if="item.enable == 1"
              :style="{backgroundImage:'url(' + require('IMG/article/bg_sold.png') + ')'}"
            ></div>
          </div>
          <NewestDivider v-if="findIndex == key" title="新增文章分享" />
        </div>
      </van-list>
    </div>
    <div class="no-data" v-if="!this.list.length && finished">
      <img src="@/assets/img/article/empty_article@2x.png"alt="">
      <p>暂无文章分享数据，快去分享吧~ </p>
    </div>
  </div>
</template>
<script>
import dynamicsService from 'SERVICE/dynamicsService'
import Tips from '@/components/Dynamics/Tips'
import NewestDivider from '@/components/Dynamics/NewestDivider'
import strFormat from '@/filters/strFormat'
export default {
  data () {
    return {
      list: [],
      current: 1,
      size: 10,
      loading: false,
      finished: false,
      scrollTop: 0,
      activeIndex: 0,
      todayCount: 0,
      findIndex: 0,
      selectIndex: 3,
      yesterdayCount: 0,
      tabs: [
        { index: 0, label: '文章分享', activeIndex: 3, href: '/dynamics/articleShareList' },
        { index: 1, label: '楼盘分享', activeIndex: 1, href: '/dynamics/houseShareList' },
        { index: 2, label: '名片分享', activeIndex: 2, href: '/dynamics/cardShareList' }
      ],
    }
  },
  components: {
    Tips,
    NewestDivider
  },
  created () {
    this.getPosition()
  },
  mounted() {
    this.$nextTick(() =>{
      this.$el.querySelector(".tab-box").scrollTop = this.scrollTop
    })
  },
  methods: {
    /**
     * 上拉加载
     */
    async onLoad () {
      // console.log(this.list)
      try {
        let result = await dynamicsService.getArticleDynamicList(this.current, this.size)
        if (this.current === 1) {
          this.list = result.records
        } else {
          this.list = [...this.list, ...result.records]
        }
        this.findIndex = this.list.findIndex(item => !item.ifToday) - 1
        if (this.current >= result.pages) {
          this.finished = true
        } else {
          this.current++
        }
        this.loading = false
      } catch (error) {
        console.log(error)
      }
    },
    onChange (index) {
      let current = this.tabs.find(item => item.index === index)
      this.selectIndex = this.tabs[index].activeIndex
      // this.$router.push(current.href)
      this.$router.replace(current.href)
    },
    /**
     * 触发列表
     */
    jump (item) {
      if (Number(item.dynamicCount)) {
        this.$router.push({ name: 'activityTrack', query: { activeIndex: this.selectIndex, shareUuid: item.shareUuid ,count: item.dynamicCount} })
      }
    },
    /**
     * 获取动态数量
     */
    async getDynamicShareCountVo () {
      try {
        let params = await dynamicsService.getDynamicShareCountVo({ sourceType: 3 })
        this.todayCount = params.todayCount || 0
        this.yesterdayCount = params.yesterdayCount || 0
      } catch (error) {
        console.log(error)
      }
    },
    /**
     * 获取保存位置
     */
    getPosition () {
      try {
        let data = sessionStorage.getItem('shareArticleList')
        if (data) {
          let obj = JSON.parse(data)
          for (const key in obj) {
            this[key] = obj[key]
          }
          sessionStorage.removeItem('shareArticleList')
        } else {
          this.getDynamicShareCountVo()
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.path === '/dynamics/activityTrack') {
      to.meta.title = '文章分享数据'
      this.scrollTop = this.$el.querySelector(".tab-box").scrollTop
      sessionStorage.setItem('shareArticleList', JSON.stringify(this.$data))
    }
    next()
  }
}
</script>
<style lang="less" scoped>
.article-container {
  background: #f7f9fa;
  .tab-box {
    overflow: scroll;
    height: calc(100% - 44px);
  }
  .item {
    background: #fff;
    display: flex;
    height: 122px;
    padding: 16px 16px 12px 16px;
    position: relative;
    overflow: hidden;
    .item-left {
      flex: 1;
      height: 90px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        font-size: 18px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        height: 52px;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break:break-all;
      }
      .txt {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: rgba(64, 81, 111, 1);
        height: 20px;
        line-height: 20px;
        .count {
          color: #40516F;
          display: flex;
          align-items: center;
          .dot {
            display: inline-flex;
            width: 8px;
            height: 8px;
            background: #007AE6;
            border-radius: 50%;
            margin-right: 8px;
          }
          .is-zero {
            background-color: #9ca5b5;
          }
        }
        .time {
          height: 16px;
          font-size: 12px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 16px;
        }
      }
    }
    .item-right {
      width: 120px;
      height: 90px;
      border-radius: 6px;
      margin-left: 16px;
      .cover-img {
        width: 120px;
        height: 90px;
        border-radius: 6px;
      }
    }
    .expire {
      position: absolute;
      width: 46px;
      height: 46px;
      right: 113px;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
  }
  .no-data {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    height: 17px;
    line-height: 17px;
    img {
      width: 88px;
      height: 88px;
    }
  }
}
</style>
